<template>
    
    <div  style="display: flex; flex-direction: column; height: 100%; width: 100%;  ">
        <el-card  style=" min-height: 65px;">
            <el-row  justify="space-between">
                <el-row justify="space-between" style="width: 300px;" align="middle">
                    <el-button @click="$router.go(-1)">返回</el-button>
                    <span style="width: 180px; overflow: hidden;" :title="flowDesign.flowName">流程名称：{{ flowDesign.flowName  }}</span>
                </el-row>

                <el-row  justify="space-between" style="width: 300px;" align="middle">
                    <span>
                        <span class="step-num">1</span> 表单配置
                    </span>
                    <span>
                        <span class="step-num">2</span>   流程配置
                    </span>
                    <span>
                        <span class="step-num">3</span>   全局配置
                    </span>
                </el-row>
                <div style="width: 300px;">
                    <el-button style="margin-left: 8px; float: right;" @click="publish">保存</el-button>
                </div>

            </el-row>
        </el-card>

       <div style="flex: 1; position: relative; overflow: auto;" >
        <FlowIndex :flowData="flowData"  @nodeClick=nodeClick :readonly="readonly" ></FlowIndex> 
       </div>
            <!-- <el-switch class="read-Model"
            v-model="readonly"
            inline-prompt
            active-text="只读"
            inactive-text="编辑"
        /> -->
     
        <el-drawer :key="currNodeData?.nodeId"
            v-model="drawer"
            @open="openDrawer"
            @close="closeHandler"
            :direction="direction"
            destroy-on-close
        >   
        <template #header>
            <el-text v-if="!drawerEdit" @click="changeTitle" tag="ins">{{ currNodeData?.nodeName }}</el-text>
            <el-input v-else  ref="drawerEditInput" v-model="currNodeData.nodeName" autofocus  @blur="drawerEditBlur" />
        </template>
           <template #default>
            <!-- <Setting  :type="nodeType" :nodeData="currNodeData"></Setting> -->
            <component ref="settingRef" :key="currNodeData.nodeId" :data="currNodeData"  :backNodeList="backNodeList" :is="currComponent"></component>
           </template>
          
        </el-drawer>
    </div>

      
 
</template>

<script setup>
    import { nextTick, onMounted, reactive, ref,watch } from 'vue'
    
    import UserConfig from './setting/userConfig.vue'
    import StartConfig from './setting/startConfig.vue'
    import SerialConfig from './setting/serialConfig.vue'

    import { uuid, nodeList } from '~/utils/flowUtil';
    import { detailApi, saveConfigApi } from '~/api/flow/flowDesign';
    import router from  '~/router';
    const id = router.currentRoute.value.query.id;
    const flowDesign = ref({});
    const flowData = ref([])
    const settingRef = ref(null)
    detailApi({id:id}).then((res)=>{
        console.log(res.data)
        flowDesign.value = res.data;
        if(flowDesign.value?.flowJson == null){
            flowData.value = [
                    { 
                    nodeId: uuid(),
                    nodeType: "start",
                    nodeName:"开始节点",
                    value: "所有人",
                    },
                    {

                        nodeId: uuid(),
                        nodeType: 'between',
                        nodeName:"审批人",
                        value: ''
                    },
                
                    {
                        nodeId: uuid(),
                        nodeName:"结束",
                        nodeType: "end",
                    }
                ]
        }else{
            flowData.value = JSON.parse(flowDesign.value.flowJson);
        }
    })
    
    // 发布
    const publish = () => {
        const data = {id: id , flowJson: JSON.stringify(flowData.value)}
        saveConfigApi(data).then(result => {
            console.log(result)
        })
    }
    

    const drawer = ref(false)
    const drawerEdit = ref(false);
    const drawerEditInput = ref();

    const changeTitle  = () =>{
        // 不这么写 多点几次后 input 聚焦无效
        drawerEdit.value = true;
        nextTick(()=>{
            drawerEditInput.value.focus();
        })
      
    }
    const drawerEditBlur = () => {
        if(currNodeData.value.nodeName.length == 0){
            currNodeData.value.nodeName = '未设置';
        }
        drawerEdit.value = false;   
    }

    const readonly = ref()

    const direction = ref('rtl')
   
   

    const openDrawer = (e, e1, e2) =>{
        console.log(e)
    }

    const nodeType = ref()
    const currNodeData = ref();

    const currComponent = ref();
   
    const backNodeList = ref([])

    const nodeClick = (nodeId, nodeData) => {
        const nodelistResult = [];
        nodeList(flowData.value, nodelistResult);
        backNodeList.value = nodelistResult;
        nodeType.value = nodeData.nodeType;
        currNodeData.value= nodeData;
        if(nodeData.default != null && nodeData.default){
            //跳过
            return;
        }
        else if(nodeData.nodeType == 'between' || nodeData.nodeType == 'parallel-node'){
            currComponent.value = UserConfig
        }else  if(nodeData.nodeType == 'start'){
            currComponent.value = StartConfig
        }else  if(nodeData.nodeType == 'serial-node'){
            currComponent.value = SerialConfig
        }else {
            // currComponent.value = Testc;
        }

        drawer.value = true;
    }


    const closeHandler = () => {
       settingRef.value.formConfig().then(formValue => {
            currNodeData.value.config = formValue;
            currNodeData.value.value = formValue.value;
       }).catch(error => {
           console.log(error)
       });
   
     
    }
</script>

<style  scoped>
    .step-num{
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 14px;
        height: 14px;
        border: 1px solid var(--el-text-color-primary);
        border-radius: 50%;
    }
    .ep-main{
        --el-main-padding: 0px;
        border-right:1px solid var(--el-border-color);
        box-sizing: border-box;
    }
    .flow-config-main{
        height: 100%;
    }
    .main-container{
        display: flex;
        width: 100%;
        height: 100%;

    }
    .left{
        width: 100px;
    }
    .left-content{
        height: 100%;
        width: calc(100% - 500px);
    }
    .right-content{
        width: 500px;
        border: 1px solid green;
    }

    .read-Model{
        position: fixed;
        top: 177px;
        right: 110px;
    }
</style>